<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品启用多单位</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-collapse-item__content {
            padding-bottom: 5px;
        }
    </style>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 6px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>


</head>
<body>
    <div id="app" style="padding: 30px 25px;">
        <el-form :inline="false" :model="formData" :show-message="false" size="small" label-width="115px"  ref="formData"  class="demo-form-inline">
            <el-form-item label="基本单位："  class=""  >
                <el-select style="width:200px" @change="setDwname"
                           v-model="formData.dw"  >
                    <el-option v-for="(item,index) in formData.listdw" :value="item.id" :label="item.name" :disabled="item.disabled" ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="辅助单位：" v-for="(item,index) in listfuzhu"   class="" prop="ddbh" >
                <div>
                    <el-select style="width:200px" @change="selectOptionDisable"
                               v-model="listfuzhu[index].dw"  >
                        <el-option v-for="(item,index) in formData.listdw" :value="item.id" :label="item.name" :disabled="item.disabled" ></el-option>
                    </el-select>

                    <el-button type="text" disabled>-</el-button>

                    <el-input v-model="listfuzhu[index].sl"  style="width:200px" ><template slot="append">{{formData.dw_name}}</template></el-input>

                    <el-button type="text" @click="deleteSelect(index)" >删除</el-button>

                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addfuzhu" icon="el-icon-plus" style="width:300px;" plain>添加单位</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            formData:{},
            listfuzhu:[],
            parmsData:{},
        },
        created(){
            this.parmsData = getParams();
            this.init();
        },
        methods:{
            async init(){
                const res = await postWebCustom(getTableId("1062"),{});
                this.formData = res.data;
                if(this.parmsData.dw != "undefined"){
                    Vue.set(this.formData,"dw",this.parmsData.dw);
                }
                this.setDwname();

            },
            async setDwname(){
                const resdw = await queryDataForId(getTableId("955"),this.formData.dw);
                Vue.set(this.formData,"dw_name",resdw.data.name);
                this.selectOptionDisable();
            },
            selectOptionDisable(){
                for(let i=0;i<this.formData.listdw.length;i++){
                    Vue.set(this.formData.listdw[i],"disabled",false);
                }
                for(let a=0;a<this.listfuzhu.length;a++){
                    for(let i=0;i<this.formData.listdw.length;i++){
                        if(this.listfuzhu[a].dw == this.formData.listdw[i].id || this.formData.listdw[i].id == this.formData.dw){
                            Vue.set(this.formData.listdw[i],"disabled",true);
                        }
                    }
                }
            },
            addfuzhu(){
                this.listfuzhu.push({dw:"",sl:"",disabled:true});
                this.selectOptionDisable();
            },
            deleteSelect(index){
                this.listfuzhu.splice(index,1);
            }
        }
    })


    function  setData(obj){
        if(obj.listdw_fuzhu != undefined){
            obj.listdw_fuzhu.splice(0,1);
            vm.listfuzhu = obj.listdw_fuzhu;
        }
    }
</script>
</html>